<template>
    <div class="ele-avatar-list">
        <div class="ele-avatar-list-item" v-bind:key="index" v-for="(item,index) in data.slice(0,length)">
            <el-avatar :src="item.src" :size="size"></el-avatar>
        </div>
        <div v-if="length && (data.length - length) > 0" class="ele-avatar-list-item">
            <el-avatar class="ele-avatar-list-item-more"> +{{data.length - length}}</el-avatar>
        </div>
    </div>
</template>
<script setup lang="ts">
import { defineProps } from "@vue/runtime-core"
import { ElAvatar } from "element-plus"

const props = defineProps({
  data: {
    type: Array,
    default: [],
  },
  size: {
    type: String,
  },
  length: {
    type: [Number, String]
  }
})

</script>

<style>
.ele-avatar-list-item {
    display: inline-block;
    margin-left: -12px;
}
</style>